<template>
    <div>
        <el-select
                style="width: 400px"
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择标签">
            <el-option
                    v-for="(item,i) in options"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
        </el-select>
        <el-table
                :data="tableData"
                border
                stripe
                class="tags">
            <el-table-column width="100" label="标签名" prop="tag"></el-table-column>
            <el-table-column label="标签值" prop="value">
                <template slot="header" slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content">
                            填写单独的一个值，如 123456
                            <br>
                            填写多个值, 以逗号分隔, 如 123,456
                            <br>
                            填写一个范围的值, 以 - 分隔, 如 123-456 或者 ?-123 或者 123-?,
                            <br>
                            填写*, 表示所有
                        </div>
                        <el-button type="text">
                            标签值
                            <i class="el-icon-question"></i>
                        </el-button>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <el-input type="textarea" v-model="scope.row.value"></el-input>
                    <!--                    <el-tag-->
                    <!--                            class="tag"-->
                    <!--                            :key="i"-->
                    <!--                            v-for="(v,i) in scope.row.values"-->
                    <!--                            closable-->
                    <!--                            :disable-transitions="true"-->
                    <!--                            @close="closeTag(scope.row.values, i)">-->
                    <!--                            {{v}}-->
                    <!--                    </el-tag>-->
                    <!--                    <el-input-->
                    <!--                            class="input-new-tag"-->
                    <!--                            v-if="inputVisible[scope.$index]"-->
                    <!--                            v-model="inputValue[scope.$index]"-->
                    <!--                            @keyup.enter.native="handleInputConfirm(scope.row.values, scope.$index)"-->
                    <!--                            @blur="handleInputConfirm(scope.row.values, scope.$index)"-->
                    <!--                    >-->
                    <!--                    </el-input>-->
                    <!--                    <el-button v-else class="button-new-tag" size="small" @click="e => showInput(e,scope.$index)">添加值</el-button>-->
                </template>
            </el-table-column>
            <el-table-column >
                <template slot="header" slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content">
                            描述性的标签不参与检索
                        </div>
                        <el-button type="text">
                            描述性
                            <i class="el-icon-question"></i>
                        </el-button>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.desc"
                            active-text="是"
                            active-value="y"
                            inactive-text="否"
                            inactive-value="n"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="用户继承">
                <template slot="header" slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content">
                            可以被用户继承
                        </div>
                        <el-button type="text">
                            用户继承
                            <i class="el-icon-question"></i>
                        </el-button>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.user"
                            active-text="是"
                            active-value="y"
                            inactive-text="否"
                            inactive-value="n"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column width="150" label="优先级" v-if="false">
                <template slot="header" slot-scope="scope">
                    <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content">
                            默认为0
                            <br>
                            相同优先级的标签会被合并，高优先级会覆盖低优先级的标签
                        </div>
                        <el-button type="text">
                            优先级
                            <i class="el-icon-question"></i>
                        </el-button>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.weight"/>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import $ from 'jquery'

    export default {
        name: "resource-tag",
        props: ["data", "setting", "tag-key"],
        computed: {
            // showInput(){
            //
            // },
            // inputValue(){
            //     if(!this.inputValue[])
            // }
        },
        data() {
            return {
                options: [],
                // options: ["客户经理代码", "机构代码", "贷款账号", "合同号", "企查查"] ,
                value: "",
                tableData: [],
                inputVisible: [],
                inputValue: [],
            }
        },
        watch: {
            value(nv) {
                var map = {};
                this.tableData.forEach(e => {
                    map[e.tag] = e;
                });
                var tableData = [];
                nv.forEach((v, i) => {
                    tableData[i] = map[v] || this.empty(v);
                    this.inputVisible[i] = false;
                    this.inputValue[i] = "";
                });
                this.tableData = tableData;
                console.log(this)
            }
        },
        methods: {
            closeTag(items, i) {
                items.splice(i, 1);
            },
            showInput(e, i) {
                var par = $(e.target).closest("td");
                this.resetTagInput(i, true);
                this.$nextTick(_ => {
                    console.log(e.target);
                    par.find("input").focus();
                    // this.$refs.saveTagInput[i].$refs.input.focus();
                });
            },
            handleInputConfirm(items, i) {
                let inputValue = this.inputValue[i];
                if (inputValue) {
                    items.push(inputValue);
                }
                this.resetTagInput(i)
            },
            resetTagInput(i, b = false) {
                this.$set(this.inputVisible, i, b);
                this.$set(this.inputValue, i, "");
            },
            empty(v = "") {
                return {
                    tag: v,
                    value: "",
                    weight: 0,
                    desc: 'n',
                    user: "y"
                }
            },
            clear() {
                Object.assign(this, this.$options.data());
                this.$set(this, "refresh", true);
            }
        },
        mounted() {
            var totalMap = {};
            var selectedMap = {};
            //自己添加的标签
            this.tableData = (this.data || []).map(e => {
                selectedMap[e.tag] = 1;
                totalMap[e.tag] = 1;
                var ni = this.empty();
                return Object.assign(ni, e);
            });
            //系统默认标签
            (this.setting.systemTags || []).forEach(e => totalMap[e] = 1);
            //部门/角色标签
            (this.setting[this.tagKey] || []).forEach(e => (totalMap[e] = 1) && (selectedMap[e] = 1));
            //默认选中
            this.options = Object.keys(totalMap);
            this.value = Object.keys(selectedMap);
            console.log("resource", selectedMap, totalMap, this)
        }
    }
</script>
<style scoped>
    .tags {
        margin-top: 10px;
    }

    .tag {
        margin-right: 10px;
    }

    .input-new-tag {
        width: auto;
        margin-top: 10px;
    }
</style>